import React from "react";
import { Card, Table, Modal, Button, message } from "antd";
import axios from "../../utils/axios";
import util from "../../utils/util";

export default class Basic extends React.Component {
  state = {
  };

  params = {
    page: 1
  }

  componentDidMount() {
    this._getList()
  }

  _getList() {
    let that = this;
    axios.ajax({
      url: '/table/list',
      data: {
        params: {
          page: this.params.page
        }
      }
    }).then((res) => {
      this.setState({
        dataSource: res.result.list.map((item, index) => {
          item.key = 'tab' + index;
          return item;
        }),

        pagination: util.pagination(res, (current) => {
          that.params.page = current;
          that._getList();
        })
      })
    })
  }

  render() {
    const columns = [
      // dataIndex: 索引值，数据源的字段属性值
      { title: 'id', width: 80, dataIndex: 'id', align: 'left' },
      { title: '用户名', width: 80, dataIndex: 'userName', align: 'center' },
      { title: '性别', width: 80, dataIndex: 'sex', render: (sex) => sex === 1 ? '男' : '女' },
      {
        title: '状态', width: 120, dataIndex: 'state',
        // render 方法默认接收当前字段：表格字典进行映射
        render: (state) => {
          let config = {
            '1': '咸鱼一条',
            '2': '风华浪子',
            '3': '北大才子',
            '4': '百度FE',
            '5': '创业者'
          }
          return config[state];
        }
      },
      {
        title: '爱好', width: 120, dataIndex: 'interest',
        render(interest) {
          let config = {
            '1': '游泳',
            '2': '打篮球',
            '3': '踢足球',
            '4': '跑步',
            '5': '爬山',
            '6': '骑行',
            '7': '桌球',
            '8': '麦霸'
          }
          return config[interest];
        }
      },
      { title: '生日', width: 120, dataIndex: 'birthday' },
      { title: '地址', width: 240, dataIndex: 'address' },
      { title: '早起时间', width: 120, dataIndex: 'time' },
    ];
    const columns2 = [
      {
        title: 'id',
        key: 'id',
        width: 80,
        fixed: 'left',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        key: 'userName',
        width: 80,
        fixed: 'left',
        dataIndex: 'userName'
      },
      {
        title: '性别',
        key: 'sex',
        width: 80,
        dataIndex: 'sex',
        render(sex) {
          return sex == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        key: 'state',
        width: 80,
        dataIndex: 'state',
        render(state) {
          let config = {
            '1': '咸鱼一条',
            '2': '风华浪子',
            '3': '北大才子',
            '4': '百度FE',
            '5': '创业者'
          }
          return config[state];
        }
      },
      {
        title: '爱好',
        key: 'interest',
        width: 80,
        dataIndex: 'interest',
        render(abc) {
          let config = {
            '1': '游泳',
            '2': '打篮球',
            '3': '踢足球',
            '4': '跑步',
            '5': '爬山',
            '6': '骑行',
            '7': '桌球',
            '8': '麦霸'
          }
          return config[abc];
        }
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      }, {
        title: '生日',
        key: 'birthday',
        width: 120,
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        key: 'address',
        width: 120,
        fixed: 'right',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        key: 'time',
        width: 80,
        fixed: 'right',
        dataIndex: 'time'
      }
    ]

    return (
      <div>
        <Card title="头部固定" style={{ margin: '10px 0'}}>
          <Table
            scroll={{ y: 240 }}
            columns={columns}
            bordered={true}
            dataSource={this.state.dataSource}
            // 是否分页
            pagination={false}
          />
        </Card>

        <Card title="左侧固定" style={{ margin: '10px 0' }}>
          <Table
            scroll={{ x: 2650 }}
            columns={columns2}
            bordered={true}
            dataSource={this.state.dataSource}
            // 是否分页
            pagination={false}
          />
        </Card>

      </div>
    )
  }
}
